/**
 * 前沿进展详情
 * 
 * */

import React, { useMemo, useCallback } from 'react';
import Header from '@/component/layout/Header/Header';
import ListTitle from "@/component/layout/ListTitle/ListTitle";
import qs from "querystring";
import { getAdvanceDetail } from '@/network/protocol';
import './style.less';
import { useEffect, useState } from 'react';
// import "video-react/dist/video-react.css"; // import css
// import { Player } from 'video-react';
import { formatTime } from '@/util/util'
import Loading from "@/component/layout/loading/loading";

const img1 = <img alt="" className="star" src={require('../../assests/img/statr1.png')} />

const QianyanDetail = (props) => {
  const [detail, setDetail] = useState({})
  const [loading1, setLoading1] = useState(true);

  const { location } = props;

  const advanceId = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.id
  }, [location.search])
  
  const getData = useCallback(async () => {

    try {
      let response = await getAdvanceDetail({ advanceId })
      setLoading1(false)

      if (response.errorCode === 0) {
        let data = response.source;
        setDetail(data)
      }
    } catch (error) {
      setLoading1(false)
      
    }

  }, [advanceId])

  useEffect(() => {
    getData()
  }, [getData])
  if(loading1) return <Loading style={{flex:1}}/>

  return <>
    <Header center={<span>前沿进展</span>} />
    <div className="global-content ProDetail-box">
      <ListTitle img={img1} text={detail.title} />
      <div className="detail-box">
        <div className="detail-img1">
          <img src={detail.listImgUrl} alt="" />
        </div>

        <div className="detail-text" >
          {detail.introduce}
        </div>
        
      </div>
      <div className="detail-time">
        <p>
          发表于：<span>{formatTime(detail.pubTime)}</span>
        </p>
      </div>
    </div>
  </>

}


export default React.memo(QianyanDetail)